@media (min-width: 768px) {
  .sidebar1 {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x:hidden;
    overflow-y: auto; 
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
  .index-sidebar li{
  	text-align: center;
  	font-size: 18px;
  }
}

@media (max-width: 768px) {
  .sidebar1 {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x:hidden;
    overflow-y: auto; 
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}

/* Sidebar navigation */
.index-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}
.index-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}
.index-sidebar li a:hover, 
.index-sidebar li a:active{
  color: #fff;
  background-color: #428bca;
}
.active{
		  color: white;
			background-color: #428bca;
}
